<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- 警告区域 -->
      <el-alert
        show-icon
        title="请选择用户！"
        type="warning"
        :closable="false"
      ></el-alert>
      <!-- 选择分类区域 -->
      <el-row
        class="cat_opt"
        style="margin-top:10px"
      >
        <el-col>
          <span>选择用户：</span>
          <!-- 选择框 -->
          <el-select
            v-model="selected"
            :placeholder="$t('common.select')"
            @change="fetchCertificateDataByUser"
          >
            <el-option
              v-for="item in userList"
              :key="item.user_id"
              :label="item.username"
              :value="{ value: item.username, key: item.user_id}"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 添加数据按钮 -->
      <div align="right">
        <el-button
          type="success"
          size="medium"
          @click="showAddDialog"
        >给用户添加数据</el-button>

      </div>

      <!-- 所有证书数据列表 -->
      <el-table
        :data="certificateDataList"
        border
        stripe
      >

        <el-table-column
          align="center"
          width="70"
          label="用户ID"
        >
          <template slot-scope="scope">
            {{ scope.row.user_id }}
          </template>
        </el-table-column>

        <el-table-column
          label="课程报名次数"
          width="50"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.course_number }}
          </template>
        </el-table-column>

        <el-table-column
          label="课程上课时间"
          width="50"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.course_time }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="课程收藏次数"
        >
          <template slot-scope="scope">
            {{ scope.row.course_collect }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="知识阅读次数"
        >
          <template slot-scope="scope">
            {{ scope.row.knowledge_number }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="知识阅读时间"
        >
          <template slot-scope="scope">
            {{ scope.row.knowledge_time }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="知识点赞个数"
        >
          <template slot-scope="scope">
            {{ scope.row.knowledge_like }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="知识收藏个数"
        >
          <template slot-scope="scope">
            {{ scope.row.knowledge_collect }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="健康达标次数"
        >
          <template slot-scope="scope">
            {{ scope.row.manager_number }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="商城购买次数"
        >
          <template slot-scope="scope">
            {{ scope.row.mall_number }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="商城消费"
        >
          <template slot-scope="scope">
            {{ scope.row.mall_pay }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="商城点赞"
        >
          <template slot-scope="scope">
            {{ scope.row.mall_like }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="商城收藏"
        >
          <template slot-scope="scope">
            {{ scope.row.mall_collect }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="问答提问次数"
        >
          <template slot-scope="scope">
            {{ scope.row.qa_number }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="考试时间"
        >
          <template slot-scope="scope">
            {{ scope.row.exam_time }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="考试次数"
        >
          <template slot-scope="scope">
            {{ scope.row.exam_number }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="50"
          label="考试满分次数"
        >
          <template slot-scope="scope">
            {{ scope.row.exam_score }}
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.operate')"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="editCertificateData(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="delCertificateData"
            >
              删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <div
        class="block"
        style="float: right; margin-top: 20px"
      >
        <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
          background
          @current-change="fetchCertificateDataByUser"
          :current-page.sync="page_num"
          :page-size="page_size"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
        <!-- 对话框 -->
        <el-dialog
          :title="certificatedata_form.user_id ? '更新证书数据' : '添加证书数据'"
          :visible.sync="dialogFormVisible"
        >
          <el-form
            style="width: 80%"
            :model="certificatedata_form"
            :rules="rules"
            ref="ruleForm"
          >
            <el-form-item
              label="用户ID："
              label-width="120px"
              prop="user_id"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.user_id"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="课程报名次数："
              label-width="120px"
              prop="course_number"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.course_number"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="课程上课时间："
              label-width="120px"
              prop="course_time"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.course_time"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="课程收藏次数："
              label-width="120px"
              prop="course_collect"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.course_collect"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="知识阅读次数："
              label-width="120px"
              prop="knowledge_number"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.knowledge_number"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="知识阅读时间："
              label-width="120px"
              prop="knowledge_time"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.knowledge_time"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="知识点赞个数："
              label-width="120px"
              prop="knowledge_like"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.knowledge_like"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="知识收藏个数："
              label-width="120px"
              prop="knowledge_collect"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.knowledge_collect"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="管理达标次数："
              label-width="120px"
              prop="manager_number"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.manager_number"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="商城购买次数："
              label-width="120px"
              prop="mall_number"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.mall_number"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="商城消费："
              label-width="120px"
              prop="mall_pay"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.mall_pay"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="商城点赞："
              label-width="120px"
              prop="mall_like"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.mall_like"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="商城收藏："
              label-width="120px"
              prop="mall_collect"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.mall_collect"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="问答提问次数："
              label-width="120px"
              prop="qa_number"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.qa_number"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="考试时间："
              label-width="120px"
              prop="exam_time"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.exam_time"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="考试次数："
              label-width="120px"
              prop="exam_number"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.exam_number"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="考试满分次数："
              label-width="120px"
              prop="exam_score"
            >
              <el-input
                autocomplete="off"
                v-model.number="certificatedata_form.exam_score"
              ></el-input>
            </el-form-item>

          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="addOrUpdateCertificateDataToUser"
            >确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import certificate from "@/api/certificatemanage";
export default {
  name: "certificatedata",
  data() {
    return {
      selected: "",
      userList: [], //选择用户列表
      certificateDataList: [], //证书数据列表
      page_num: 1,
      page_size: 10, //每10个数据一页
      total: 0,
      certificatedata_form: {},
      selectedUserObj: {}, //选中对象
      dialogFormVisible: false, //对话框
      rules: {
        user_id: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        course_number: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        course_time: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        course_collect: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        knowledge_nmuber: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        knowledge_time: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        knowledge_like: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        knowledge_collect: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        manager_number: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        mall_number: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        mall_pay: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        mall_like: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        mall_collect: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        qa_number: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        exam_time: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        exam_number: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        exam_score: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.fetchUserList();
  },
  methods: {
    //获取选项框用户列表
    fetchUserList() {
      var vm = this;
      certificate
        .getUserList(this.page_num, 1000)
        .then((res) => {
          // console.log(res);
          this.userList = res.data.userList.list;
          // console.log(this.userList);
        })
        .catch((error) => {});
    },
    ////根据所选用户渲染该证书数据列表
    fetchCertificateDataByUser(selectedUser) {
      this.selectedUserObj = selectedUser;
      // console.log('id',user.key)
      certificate
        .getCertificateDataByUser(this.selectedUserObj.key)
        .then((res) => {
          // console.log(res)
          var selectedList = [];
          selectedList.push(res.data.certificateData);
          // console.log(selectedList)
          this.certificateDataList = selectedList;
          this.total = selectedList.length;
        })
        .catch((error) => {});
    },
    //添加对话框显示
    showAddDialog() {
      this.dialogFormVisible = true;
      this.certificatedata_form = {};
    },
    //更新对话框显示
    editCertificateData(row) {
      // console.log(row);
      this.dialogFormVisible = true;
      this.certificatedata_form = { ...row };
    },
    //给用户添加/更新证书数据
    addOrUpdateCertificateDataToUser() {
      this.dialogFormVisible = false;
      certificate
        .addOrUpdateCertificateData(this.certificatedata_form)
        .then((res) => {
          if (res.errorCode == 0) {
            this.$message({
              type: "success",
              message: this.certificatedata_form.user_id
                ? "修改证书数据成功"
                : "添加证书数据成功",
            });
            this.fetchCertificateDataByUser(this.selectedUserObj);
          } else {
            this.$message({
              type: "error",
              message: "error!",
            });
          }
        })
        .catch((error) => {});
    },
    //删除用户证书数据
    delCertificateData(selected) {
      // console.log(this.selected)
      this.$confirm("此操作将永久删除该用户证书数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用接口
          certificate.delCertificateData(this.selected.key).then((res) => {
            //提示
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //刷新页面数据
            this.fetchCertificateByUser(this.selectedUserObj);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
